<script setup>
import { ref } from 'vue';
import { getTaskListAPI } from '@/api/task'
//任务列表数据
const pickupList = ref([])
//任务类别接口参数
const pickupData = {
  page:1,
  pageSize:10,
  status:1
}
//总页数
const totalPage = ref(1)
//状态
const statusArr = ref(['待提货','在途','改派','已交付','已作废'])
//控制下拉刷新的加载
const isTriggered = ref(false)

//获取任务列表数据
const getPickupList = async ()=>{
  const {data} = await getTaskListAPI(pickupData)
  // console.log(data);
  pickupList.value = data.items
  totalPage.value = data.pages
}
getPickupList()

//上拉刷新
const onScrolltolower = async()=>{
  if (pickupData.page>=totalPage.value) return uni.showToast({ title: '没有更多数据了',icon: 'none', mask: true})
  pickupData.page++
  const {data} = await getTaskListAPI(pickupData)
  pickupList.value=[...pickupList.value,...data.items]
}

//下拉刷新
const onRefresherrefresh = async()=>{
  isTriggered.value = true
  pickupData.page=1
  pickupList.value = []
  await getPickupList()
  isTriggered.value = false
}


</script>

<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view" :refresher-triggered="isTriggered" @refresherrefresh="onRefresherrefresh" @scrolltolower="onScrolltolower">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="item in pickupList" :key="item.id">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${item.id}`">
          <view class="header">
            <text class="no">任务编号: {{item.id}}</text>
            <text class="status">{{statusArr[item.status-1]}}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{item.startAddress}}</view
              >
              <view class="line">{{item.endAddress}}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">2022.05.04 13:00</view>
          <navigator v-if="item.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${item.id}`"
            class="action"
            >提货</navigator
          >
          <button v-else hover-class="none" disabled class="action">提货</button>
        </view>
      </view>
      <view v-if="false" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
